<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow" style="display: inline-block">
        <div>
          <a-form
            size="small"
            :model="pageData"
            layout="inline"
            label-align="right"
            :label-col-props="{ span: 8 }"
            :wrapper-col-props="{ span: 16 }"
          >
            <a-form-item label="织布单号">
              <a-input
                class="bacClass"
                v-model="pageData.planOrderCode"
                @press-enter="huiche"
                allow-clear
                style="width: 200px"
              />
            </a-form-item>

            <a-form-item label="客户">
              <a-input
                class="bacClass"
                v-model="pageData.customName"
                @press-enter="huiche"
                allow-clear
                style="width: 200px"
              />
            </a-form-item>

            <a-form-item label="原料编号">
              <a-input
                class="bacClass"
                v-model="pageData.rawmaterialCode"
                @press-enter="huiche"
                allow-clear
                style="width: 200px"
              />
            </a-form-item>

            <a-form-item label="原料名称">
              <a-input
                class="bacClass"
                v-model="pageData.rawmaterialName"
                @press-enter="huiche"
                allow-clear
                style="width: 200px"
              />
            </a-form-item>

            <a-form-item label="纱批">
              <a-input
                class="bacClass"
                v-model="pageData.yarnBatch"
                @press-enter="huiche"
                allow-clear
                style="width: 200px"
              />
            </a-form-item>

            <a-form-item label="日期" label-col-flex="66px">
              <a-date-picker
                popup-container="html"
                :style="{ width: '228px' }"
                class="bacClass"
                v-model="pageData.dateStart"
              />
            </a-form-item>
            <a-form-item label="至" label-col-flex="38px">
              <a-date-picker
                popup-container="html"
                :style="{ width: '214px' }"
                class="bacClass"
                v-model="pageData.dateEnd"
              />
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar
          :items="pageData.btnList"
          @select="selectHandler"
          @cel="zuofei"
          @tj="tjs"
          @export="exports"
        >
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <a-space style="float: right; z-index: 9999"> </a-space>
      <a-spin
        :loading="pageData.pageLoading"
        tip="加载中"
        dot
        style="height: 100%; width: 100%; z-index: 999"
      >
        <AgGridVuesCopys
          :rowHeight="33"
          :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          :suppressDragLeaveHidesColumns="true"
          rowSelection="multiple"
          @grid-ready="gridReady"
          @columnResized="onColumnResized"
          @columnMoved="onColumnMoved"
          @columnVisible="onColumnVisible"
          style="height: calc(100% - 45px)"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="table.dataList"
          :columnDefs="tc1"
          :localeText="localeText1"
        ></AgGridVuesCopys>
        <paginationCopys
          :total="total"
          show-total
          show-jumper
          show-page-size
          @change="PageSize"
          @page-size-change="change1"
          style="justify-content: center"
          :page-size="pagination.pageSize"
          :current="pagination.page"
          :page-size-options="pagingList1"
        />
        <!-- <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:94%"
          :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc1"
          :localeText="localeText1"></AgGridVuesCopys> -->
      </a-spin>
    </template>

    <a-drawer
      style="z-index: 999"
      ok-text="关闭"
      :hide-cancel="true"
      :drawer-style="{ zIndex: 999 }"
      :mask-closable="false"
      :width="400"
      popup-container=".main-base-style"
      :height="pageData.rHeight"
      :visible="pageData.showAdd"
      placement="bottom"
      unmount-on-close
      @ok="sideNo1"
      :closable="false"
      @cancel="pageData.showAdd = false"
      :ok-loading="pageData.pageLoading"
    >
      <template #title> 详情 </template>
      <a-spin
        :loading="pageData.pageLoading"
        tip="加载中"
        dot
        style="height: 100%; width: 100%; z-index: 999"
      >
        <AgGridVuesCopys
          :rowHeight="33"
          :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          rowSelection="multiple"
          @grid-ready="gridReady1"
          style="height: 100%"
          :defaultColDef="defaultColDef1"
          class="ag-theme-alpine"
          :rowData="table1.dataList"
          :columnDefs="dc"
          :localeText="localeText1"
        ></AgGridVuesCopys>
        <!-- <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
          style="height: 100%" :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="table.dataList"
          :columnDefs="tc1" :localeText="localeText1">
        </AgGridVuesCopys> -->
      </a-spin>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">
  import { post, get } from '@/api/http'
  import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
  } from '@/hooks/table'
  import QrcodeVue from 'qrcode.vue'
  import ModalDialog from '@/components/ModalDialog.vue'
  import { ref, reactive, onMounted, onActivated } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import emitter from '@/hooks/useEventBus'
  import usePermission from '@/store/modules/permission'
  import PageTabelLayout from '@/components/pageTabelLayout.vue'
  import WHService, { Warhouse, CompanyList, WhTypeField } from '@/service/wh'
  import { localeText } from '@/api/aggridZw'
  import { pagingList } from '@/api/paging'
  interface ClothInfo {
    id: any
  }
  import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
  export default {
    name: 'WorkshopMaterialReturnDetails',
    setup() {
      const dataForm = reactive<ClothInfo>({
        id: null,
      })
      const headerShow = ref<boolean>(true)
      const total = ref(10)
      const page = ref(1)
      const size = ref(10)
      function PageSize(val: any) {
        pagination.page = val
        doRefresh()
      }

      function change1(val: any) {
        pagination.pageSize = val
        doRefresh()
      }
      let id = ref(1)
      //查询

      function doRefresh() {
        pageData.pageLoading = true
        updateGridState01()
        post({
          url: '/qms/MaterialReturnGather/getPage',
          data: {
            page: pagination.page,
            size: pagination.pageSize,
            deleteState: 0,

            planOrderCode: pageData.planOrderCode,
            customName: pageData.customName,
            rawmaterialCode: pageData.rawmaterialCode,
            rawmaterialName: pageData.rawmaterialName,
            yarnBatch: pageData.yarnBatch,
            beginDate: pageData.dateStart,
            endDate: pageData.dateEnd,
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              // data.list.filter(function(o:any){

              // })
              table.handleSuccess(data.list)
              gridOption.value.setRowData(data.list)
              total.value = data.total
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }
      const huiche = () => {
        doRefresh()
      }
      const { selectedRowKeys, onSelectionChange } = useRowSelection()
      const selectedRowKeysChecked = useRowSelection()
      const pagination = usePagination(doRefresh)
      const table = useTable()
      const table1 = useTable()
      const rowKey = useRowKey('id')
      const tableDataList = ref([])
      const tableColumns = useTableColumn([
        {
          title: '退料单号',
          key: 'materialReturnCode',
          dataIndex: 'materialReturnCode',
          width: 150,
        },
        {
          title: '织布单号',
          key: 'planOrderCode',
          dataIndex: 'planOrderCode',
          width: 150,
        },
        {
          title: '客户',
          key: 'customName',
          dataIndex: 'customName',
          width: 150,
        },
        {
          title: '原料编号',
          key: 'rawmaterialCode',
          dataIndex: 'rawmaterialCode',
          width: 150,
        },
        {
          title: '原料名称',
          key: 'rawmaterialName',
          dataIndex: 'rawmaterialName',
          width: 150,
        },
        {
          title: '公司',
          key: 'outSouringCompany',
          dataIndex: 'outSouringCompany',
          width: 150,
        },
        {
          title: '纱牌',
          key: 'yarnCard',
          dataIndex: 'yarnCard',
          width: 150,
        },
        {
          title: '色号',
          key: 'colorCode',
          dataIndex: 'colorCode',
          width: 150,
        },
        {
          title: '色称',
          key: 'colorName',
          dataIndex: 'colorName',
          width: 150,
        },
        {
          title: '整件/个数',
          key: 'pieceCount',
          dataIndex: 'pieceCount',
          width: 150,
        },
        {
          title: '散件/个数',
          key: 'bulkCount',
          dataIndex: 'bulkCount',
          width: 150,
        },
        {
          title: '纱批',
          key: 'yarnBatch',
          dataIndex: 'yarnBatch',
          width: 150,
        },

        {
          title: '等级',
          key: 'grade',
          dataIndex: 'grade',
          width: 150,
        },

        {
          title: '退料数量',
          key: 'weight',
          dataIndex: 'weight',
          width: 150,
        },
        {
          title: '整件件数',
          key: 'pieceNum',
          dataIndex: 'pieceNum',
          width: 200,
        },

        {
          title: '整件件重',
          key: 'pieceWeight',
          dataIndex: 'pieceWeight',
          width: 200,
        },
        {
          title: '散件件数',
          key: 'bulkNum',
          dataIndex: 'bulkNum',
          width: 200,
        },
        {
          title: '散件散重',
          key: 'bulkWeight',
          dataIndex: 'bulkWeight',
          width: 200,
        },
        {
          title: '备注',
          key: 'remark',
          dataIndex: 'remark',
          width: 200,
        },
        {
          title: '创建人',
          key: 'createName',
          dataIndex: 'createName',
          width: 150,
        },
        {
          title: '创建时间',
          key: 'createTime',
          dataIndex: 'createTime',
          width: 200,
        },
        {
          title: '单据状态',
          key: 'submitState',
          slotName: 'submitState',
          dataIndex: 'submitState',
          width: 200,
          fixed: 'right',
        },
        {
          title: '入库状态',
          key: 'stockInState',
          slotName: 'stockInState',
          dataIndex: 'stockInState',
          width: 200,
          fixed: 'right',
        },
        {
          title: '操作',
          key: 'act',
          slotName: 'act',
          width: 200,
          fixed: 'right',
        },
      ])
      const tableColumns1 = useTableColumn([
        {
          title: '织布单号',
          key: 'planOrderCode',
          dataIndex: 'planOrderCode',
          width: 150,
        },
        {
          title: '客户',
          key: 'customName',
          dataIndex: 'customName',
          width: 150,
        },
        {
          title: '机台号',
          key: 'machineCode',
          dataIndex: 'machineCode',
          width: 150,
        },
        {
          title: '原料编号',
          key: 'rawmaterialCode',
          dataIndex: 'rawmaterialCode',
          width: 150,
        },
        {
          title: '原料名称',
          key: 'rawmaterialName',
          dataIndex: 'rawmaterialName',
          width: 150,
        },

        {
          title: '纱批',
          key: 'yarnBatch',
          dataIndex: 'yarnBatch',
          width: 150,
        },

        {
          title: '等级',
          key: 'grade',
          dataIndex: 'grade',
          width: 150,
        },

        // {
        //   title: '理论余料数量',
        //   key: 'brandName',
        //   dataIndex: 'brandName',
        //   width: 150,
        // },

        {
          title: '实际余料重量',
          key: 'weight',
          dataIndex: 'weight',
          width: 200,
        },
        {
          title: '整件件数',
          key: 'pieceNum',
          dataIndex: 'pieceNum',
          width: 200,
        },

        {
          title: '整件件重',
          key: 'pieceWeight',
          dataIndex: 'pieceWeight',
          width: 200,
        },
        {
          title: '散件件数',
          key: 'bulkNum',
          dataIndex: 'bulkNum',
          width: 200,
        },
        {
          title: '散件散重',
          key: 'bulkWeight',
          dataIndex: 'bulkWeight',
          width: 200,
        },
      ])
      //获取公司部门组列表
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1
      }

      let tc1: any[] = tableColumns.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.key,
          pinned: o['fixed'],
          tooltipField: o.key,
        }
        if (o.slotName === 'act') {
          obj['resizable'] = false
          obj['filter'] = false
          obj['sortable'] = false

          obj['lockPosition'] = 'right'
          obj['width'] = 120
          obj['cellRenderer'] = {
            template: ` <el-button style="color:#165dff;" link @click="a1">详情</el-button>`,
            setup(props: any) {
              const a1 = () => {
                editHandler(props.params.data)
              }
              return {
                a1,
              }
            },
          }
        }
        if (o.slotName === 'submitState') {
          obj['resizable'] = false
          obj['sortable'] = false
          obj['width'] = 120
          obj['lockPosition'] = 'right'
          obj['cellRenderer'] = {
            template: `
          <a-space>
                  <el-tag class="ml-2" v-if="a == 0" type="warning">未提交</el-tag>
                  <el-tag class="ml-2" v-if="a == 1" type="success">已提交</el-tag>
                  <el-tag class="ml-2" v-if="a == 2" type="info">作废</el-tag>
          </a-space>
                  `,
            setup(props: any) {
              let val = ref()
              val.value =
                props.params.data.submitState == 0
                  ? '未提交'
                  : props.params.data.submitState == 1
                  ? '已提交'
                  : '作废'
              return {
                val,
                a: props.params.data.submitState,
              }
            },
          }
          obj['filterParams'] = {
            valueFormatter: function (params: any) {
              return params.value == '0'
                ? '未提交'
                : params.value == '1'
                ? '已提交'
                : params.value == '2'
                ? '作废'
                : ''
            },
          }
        }
        if (o.slotName === 'stockInState') {
          obj['resizable'] = false
          obj['sortable'] = false
          obj['width'] = 120
          obj['lockPosition'] = 'right'
          obj['cellRenderer'] = {
            template: `
          <a-space>
                    <el-tag class="ml-2" v-if="a == 0" type="warning">未入库</el-tag>
          <el-tag class="ml-2" v-if="a == 1" type="success">已入库</el-tag>
        </a-space>
                   `,
            setup(props: any) {
              let val = ref()
              val.value = props.params.data.stockInState == 0 ? '未入库' : '已入库'
              return {
                val,
                a: props.params.data.stockInState,
              }
            },
          }
          obj['filterParams'] = {
            valueFormatter: function (params: any) {
              return params.value == '0' ? '未入库' : params.value == '1' ? '已入库' : ''
            },
          }
        }
        return obj
      })
      let a1 = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      tc1 = a1.concat(tc1)

      const pageData = reactive<{
        pageLoading: boolean
        customName: any
        rawmaterialCode: any
        rawmaterialName: any
        yarnBatch: any
        dateStart: any
        dateEnd: any
        planOrderCode: any
        rHeight: number | undefined
        showAdd: boolean
        btnList: any[]
      }>({
        pageLoading: false,
        planOrderCode: '',
        customName: '',
        rawmaterialCode: '',
        rawmaterialName: '',
        yarnBatch: '',
        dateStart: '',
        dateEnd: '',
        rHeight: 0,
        showAdd: false,
        btnList: [],
      })

      onMounted(() => {
        doRefresh()
        emitter.on('WorkshopMaterialReturnDetails', () => {
          // selCxAll({});
          doRefresh()
        })
        pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
        //弹出层的高
        if (pageData.rHeight !== undefined) {
          pageData.rHeight = pageData.rHeight - 50
        }
      })
      let isIDs: any = ref(1)

      // 未处理分页查询
      const selectHandler = () => {
        pagination.page = 1
        loadings.value = true

        doRefresh()
      }

      let loadings = ref(false)

      // 一表格准备事件
      const gridOption = ref()
      const colState = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
        colState.value = params.columnApi
      }
      const whList = ref<any[]>([])
      const whService = new WHService()
      const whTypeList = whService.whTypeList
      const whTypeFieldList = whService.whTypeFieldList
      const companyList: any = whService.companyList
      // 表格准备事件
      const gridOption1 = ref()
      const gridReady1 = (params: any) => {
        gridOption1.value = params.api
      }
      const defaultColDef1 = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1
      }
      let dc: any[] = tableColumns1.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.key,
          pinned: o['fixed'],
          tooltipField: o.key,
        }

        return obj
      })
      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      dc = a.concat(dc)
      const editHandler = (record: any) => {
        for (var key in record) {
          dataForm[key] = record[key]
        }

        pageData.showAdd = true
        doRefresh1(record)
      }
      // 子表查询渲染
      function doRefresh1(record: any) {
        pageData.pageLoading = true

        post({
          url: '/qms/MaterialReturn/getList',
          data: {
            materialReturnGatherId: record.id,
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              table1.handleSuccess(data)
              gridOption1.value.setRowData(data)
              total.value = data.total
              gridOption1.value.sizeColumnsToFit()
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }

      // 子表关闭
      const sideNo1 = () => {
        pageData.showAdd = false
        doRefresh()
      }
      // 作废事件
      const zuofei = () => {
        // alert(999)
        if (gridOption.value.getSelectedRows().length === 0) {
          Message.error('请先勾选')
          return
        }
        if (
          gridOption.value.getSelectedRows().map((o: any) => {
            return o.submitState
          })[0] != 2
        ) {
          Modal.confirm({
            title: '系统提示',
            content: '确认作废选中的数据?',
            onOk() {
              pageData.pageLoading = true
              post({
                url: '/qms/MaterialReturnGather/update',
                data: [
                  {
                    id: gridOption.value.getSelectedRows().map((o: any) => {
                      return o.id
                    })[0],
                    submitState: 2,
                  },
                ],
              })
                .then(({ code, data }: any) => {
                  if (code === 200) {
                    Message.success({
                      content: '作废成功',
                      duration: 6000,
                    })
                    pagination.page = 1
                    doRefresh()
                  } else {
                    Message.error({
                      content: '作废失败',
                      duration: 6000,
                    })
                  }
                })
                .finally(() => {
                  pageData.pageLoading = false
                })
            },
          })
        } else {
          Message.error({
            content: '数据已作废无法再次作废',
            duration: 6000,
          })
        }
      }

      // 提交事件
      const tjs = () => {
        // alert(999)
        if (gridOption.value.getSelectedRows().length === 0) {
          Message.error('请先勾选')
          return
        }
        if (
          gridOption.value.getSelectedRows().map((o: any) => {
            return o.submitState
          })[0] == 0
        ) {
          Modal.confirm({
            title: '系统提示',
            content: '确认提交选中的数据?',
            onOk() {
              pageData.pageLoading = true
              post({
                url: '/qms/MaterialReturnGather/update',
                data: [
                  {
                    id: gridOption.value.getSelectedRows().map((o: any) => {
                      return o.id
                    })[0],
                    submitState: 1,
                  },
                ],
              })
                .then(({ code, data }: any) => {
                  if (code === 200) {
                    Message.success({
                      content: '提交成功',
                      duration: 6000,
                    })
                    pagination.page = 1
                    doRefresh()
                  } else {
                    Message.error({
                      content: '提交失败',
                      duration: 6000,
                    })
                  }
                })
                .finally(() => {
                  pageData.pageLoading = false
                })
            },
          })
        } else {
          Message.error({
            content: '数据已提交或已作废无法再次提交',
            duration: 6000,
          })
        }
      }

      //导出
      const exports = () => {
        if (gridOption.value.getSelectedRows().length === 0) {
          Message.error('请先勾选')
          return
        } else {
          let idList: any = []
          gridOption.value.getSelectedRows().forEach(function (o: any) {
            idList.push(o['id'])
          })
          //将表头拼接出来
          let head =
            '<th>退料单号</th><th>织布单号</th><th>客户</th><th>原料编号</th><th>原料名称</th><th>纱批</th><th>等级</th><th>退料数量</th><th>整件件数</th><th>整件件重</th><th>散件件数</th><th>散件散重</th><th>创建人</th><th>创建时间</th><th>单据状态</th><th>入库状态</th>'
          //拿到当前表格数据与勾选的行做筛选

          let nowRow = table.dataList.filter(function (o) {
            return (
              gridOption.value
                .getSelectedRows()
                .map((o: any) => {
                  return o.id
                })
                .indexOf(o['id']) !== -1
            )
          })
          let body = ''
          nowRow.forEach(function (o) {
            body += '<tr><td>' + o['materialReturnCode'] + '</td>'
            body += '<td>' + (o['planOrderCode'] == undefined ? '' : o['planOrderCode']) + '</td>'
            body += '<td>' + (o['customName'] == undefined ? '' : o['customName']) + '</td>'
            body +=
              '<td>' + (o['rawmaterialCode'] == undefined ? '' : o['rawmaterialCode']) + '</td>'

            body +=
              '<td>' + (o['rawmaterialName'] == undefined ? '' : o['rawmaterialName']) + '</td>'
            body += '<td>' + (o['yarnBatch'] == undefined ? '' : o['yarnBatch']) + '</td>'
            body += '<td>' + (o['batch'] == undefined ? '' : o['batch']) + '</td>'
            body += '<td>' + (o['returnNum'] == undefined ? '' : o['returnNum']) + '</td>'

            body += '<td>' + (o['pieceNum'] == undefined ? '' : o['pieceNum']) + '</td>'
            body += '<td>' + (o['pieceWeight'] == undefined ? '' : o['pieceWeight']) + '</td>'
            body += '<td>' + (o['bulkNum'] == undefined ? '' : o['bulkNum']) + '</td>'
            body += '<td>' + (o['bulkWeight'] == undefined ? '' : o['bulkWeight']) + '</td>'

            body += '<td>' + o['createName'] + '</td>'
            body += '<td>' + o['createTime'] + '</td>'
            body +=
              '<td>' +
              (o['submitState'] === 0 ? '已提交' : o['submitState'] === 1 ? '未提交' : '作废') +
              '</td>'
            body += '<td>' + (o['stockInState'] === 0 ? '未入库' : '已入库') + '</td>'
            body += '</tr>'
          })
          tableToXlsx(head, '退库汇总', body)
          console.log(table)
        }
      }

      function tableToXlsx(head: any, filename: any, body: any) {
        const uri = 'data:application/vnd.ms-excel;base64,',
          template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`

        const a = document.createElement('a')
        a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
        a.download = filename
        a.click()
        document.removeChild(a)
      }
      const pagingList1: any = ref(pagingList)
      const localeText1: any = ref(localeText)
      //设置权限
      // ['查询', '新增', '删除', '导出', '导入']
      const permissionStore = usePermission()

      if (permissionStore.hasPermisson('cjtlhz.cx')) {
        pageData.btnList.push('查询')
      }
      if (permissionStore.hasPermisson('cjtlhz.tj')) {
        pageData.btnList.push('提交')
      }
      if (permissionStore.hasPermisson('cjtlhz.zf')) {
        pageData.btnList.push('作废')
      }
      if (permissionStore.hasPermisson('cjtlhz.dc')) {
        pageData.btnList.push('导出')
      }
      const { saveGridState: saveGridState01, updateGridState: updateGridState01 } =
        saveOrUpdateGridState01('WorkshopMaterialReturnSummary-1', gridOption, colState, tc1)
      const onColumnMoved = () => {
        saveGridState01()
      }
      const onColumnResized = () => {
        saveGridState01()
      }
      const onColumnVisible = () => {
        saveGridState01()
      }
      return {
        saveOrUpdateGridState01,
        saveGridState01,
        updateGridState01,
        onColumnMoved,
        onColumnResized,
        onColumnVisible,
        colState,
        pagingList1,
        localeText1,
        sideNo1,
        huiche,
        editHandler,
        gridReady1,
        defaultColDef1,
        print,
        whTypeList,
        dc,
        isIDs,
        companyList,
        table1,
        whList,
        zuofei,
        id,
        exports,
        tc1,
        tableColumns1,
        gridOption,
        tableDataList,
        gridReady,

        total,
        dataForm,
        selectedRowKeys,
        s: selectedRowKeysChecked.selectedRowKeys,
        pagination,
        tableColumns,
        table,
        rowKey,
        pageData,
        selectHandler,
        defaultColDef,
        tjs,
        headerShow,
        change1,
        PageSize,
      }
    },
    components: { Toolbar, PageTabelLayout,  ModalDialog, QrcodeVue },
  }
</script>
<style scoped lang="less">
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
